require(['./config'] , () => {
    require(['template','floatbar','header','footer'],(template , floatbar) => {
        class Buycart {
            constructor (){
                this.renderList()
                this.checksChange()
                this.calcCountNumreduce()
                this.calcCountNumadd()
                this.setAllCheackState()
                this.removedTr()
                this.setAllCheackChange()
            }
            // 根据数据渲染购物车列表
            renderList(){
                let cart = localStorage.getItem('cart')
                if(cart){
                    // 根据localStorage的购物车数据渲染列表
                    this.cart = JSON.parse(cart)
                    $('#cart-tbody').html(template('cart-tbody-template' , { cart:this.cart}))
                    $('#cartProduct-show').show()
                    this.calcTotalPrice()
                    this.calcCartCount()
                    floatbar.calcCartCounts()
                }else{
                    // 购物车为空，则渲染为空的div
                    $('#nothing-cart').show()
                }
            }
            // 算总价
            // 不管做了什么操作，我们都会同步到this.cart数据里，所以我们只需要从this.cart里来计算总价
            // 在做了影响总价的操作的时候我们只需要调用此方法就好
            calcTotalPrice(){
                const totalPrice = this.cart.reduce((money , shop) => {
                    if(shop.check == true)
                    {money += shop.price * shop.count}
                    return money
                }, 0)
                $('#zongji1').html(`¥${totalPrice.toFixed(2)}`)
                $('#zongji2').html(`总计:&nbsp;&nbsp;&nbsp;&nbsp;¥${totalPrice.toFixed(2)}`)
            }
            // 计算购物车内物品总数量
            calcCartCount(){
                // 取出localStorage,计算总数量
                let totalCount = 0
                let cart = localStorage.getItem('cart')
                if(cart){
                    cart = JSON.parse(cart)
                        totalCount = cart.reduce((count , shop) => {
                            if(shop.check == true)
                                count += shop.count
                            return count
                        }, 0)
                }
                $('#zhongji-count').html(totalCount)
            }
            // 改变单选按钮状态
            checksChange(){
                const _this = this
                $('.check').on('change' , function(){
                    // 找到当前商品的id，根据id来修改选中状态
                    const id =$(this).parents('tr').attr('data-id')
                    this.cart = _this.cart.map(shop => {
                        if(shop.id == id){
                            // 用prop选取当前选框的checked属性，赋值给当前数据
                            shop.check = $(this).prop('checked')
                        }
                        return shop
                    })
                    // 把修改过后的cart再存进去
                    localStorage.setItem('cart' , JSON.stringify(_this.cart))
                    // 每一次单选按钮改变状态，都要去设置全选按钮状态
                    _this.setAllCheackState()
                    _this.calcTotalPrice()
                    _this.calcCartCount()
                })
            }
            // 全选框状态设置
            setAllCheackState(){
                $('.checkall').prop('checked' , this.cart.every(shop => {
                    return shop.check === true 
                }))
            }
            // 全选按钮状态改变
            setAllCheackChange(){
                const this2 = this
                $('.checkall').on('change',function() {
                    this2.cart = this2.cart.map(shop =>{
                        shop.check = $(this).prop('checked')
                        return shop
                    })
                    localStorage.setItem('cart' , JSON.stringify(this2.cart))
                    this2.renderList()
                    this2.calcTotalPrice()
                    this2.calcCartCount()
                    this2.checksChange()
                    this2.calcCountNumreduce()
                    this2.calcCountNumadd()
                });
            }
            // 减
            calcCountNumreduce(){
                const _this = this
                $('.reduce-num').on('click',function(){
                    var numcount = Number($(this).next().html())
                    if(numcount > 0){
                        numcount = numcount-1
                        $(this).next().html( numcount)
                    }else{
                        numcount = 0
                        $(this).next().html( numcount)

                    }
                    const id =$(this).parents('tr').attr('data-id')
                    this.cart = _this.cart.map(shop => {
                        if(shop.id == id){
                            shop.count = Number($(this).next().html())
                        }
                        return shop
                    })
                    localStorage.setItem('cart' , JSON.stringify(_this.cart))
                    _this.calcTotalPrice()
                    _this.calcCartCount()
                    floatbar.calcCartCounts()
                })
                
            }
            // 加
            calcCountNumadd(){
                const _this = this
                $('.add-num').on('click',function(){
                    var numcounts = Number($(this).prev().html())
                        
                        numcounts = numcounts+1
                        
                        $(this).prev().html( numcounts)

                    const id =$(this).parents('tr').attr('data-id')
                    this.cart = _this.cart.map(shop => {
                        if(shop.id == id){
                            shop.count = Number($(this).prev().html())
                        }
                        return shop
                    })
                    localStorage.setItem('cart' , JSON.stringify(_this.cart))
                    _this.calcTotalPrice()
                    _this.calcCartCount()
                    floatbar.calcCartCounts()
                })
            }
            // 移除
            removedTr(){
                const _this = this
                $('.cart-p-list').on('click','.btn-del-p' ,function(){
                    const id =$(this).parents('tr').attr('data-id')
                    _this.cart = _this.cart.filter(shop => {
                          return  shop.id != id
                    })
                    localStorage.setItem('cart' , JSON.stringify(_this.cart))
                    if(_this.cart.length == 0){
                        localStorage.removeItem('cart')
                    }
                    $('#cartProduct-show').css('display','none')
                    _this.renderList()
                    _this.setAllCheackState()
                    _this.checksChange()
                    floatbar.calcCartCounts()

                })
                
            }
        }
        new Buycart
    })
})